<template>
    <view class="flow-box padding bg-white" :style="'height: ' + loadingTop + 'px'">
        <view class="loading" v-show="loading" :style="'top: ' + loadingTop + 'px'">
            <image src="/static/icon/loading.gif" style="width: 320upx; height: 240upx;"></image>
        </view>

        <view class="flow-item1" v-if="modelType == 1" :class="left[index] == 1 ? 'left' : ''"
            :style="'top:' + top[index] + 'px;'" v-for="(item, index) in newList" :key="index" :data-index="index"
            @click="choose">
            <view class="pic">
                <image class="image" mode="widthFix" :src="item.pic" style="width: 100%; display: block;"></image>
            </view>
            <view class="fallContent">
                <text>{{item.name}}</text>
                <view class="user">
                    <image style="width: 40upx; height: 40upx; border-radius: 50%; margin-right: 10upx;"
                        :src="item.avatar"></image>
                    {{item.nickname}}
                </view>
            </view>
        </view>

        <view class="flow-item2" v-if="modelType == 2" :class="left[index] == 1 ? 'left' : ''"
            :style="'top:' + top[index] + 'px;'" v-for="(item, index) in newList" :key="index" :data-index="index"
            @click="choose">
            <view class="pic">
                <image class="image" mode="widthFix" :src="item.pic" style="width: 100%; display: block;"></image>
            </view>
            <view class="fallContent">
                <text>{{item.name}}</text>
                <view class="user">
                    <image style="width: 40upx; height: 40upx; border-radius: 50%; margin-right: 10upx;"
                        :src="item.avatar"></image>
                    {{item.nickname}}
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        props: {
            // 数据列表
            list: {
                type: Array,
                default () {
                    return []
                }
            },
            // 加载动画
            loading: {
                type: Boolean,
                default: true
            },
            modelType: {
                type: Number,
                default: 2
            }
        },
        data() {
            return {
                mark: 0,
                newList: [],
                boxHeight: [],
                top: [],
                left: [],
                loadingTop: 0
            }
        },
        watch: {
            // 数据
            list: function(newVal, oldVal) {
                console.log("waterfall components update datalist")
                this.mark = oldVal.length;
                if (newVal != oldVal) {
                    this.newList = this.list;
                    this.$nextTick(function() {
                        setTimeout(() => {
                            this.waterFall();
                        }, 120)
                    })
                }
            }
        },
        methods: {
            // 瀑布流定位
            waterFall() {
                console.log("当前 elementClass", uni.createSelectorQuery());
                const query = uni.createSelectorQuery().in(this);
                let elementClass = '.flow-box .flow-item' + this.modelType;
                console.log("当前 elementClass", elementClass);
                console.log("当前 query.selectAll", query.selectAll(elementClass));
                setTimeout(() => {
                    query.selectAll(elementClass).boundingClientRect(res => {
                        console.log("当前 query => res", res);
                        console.log(res.__proto__ === Object.prototype);
                        if (res.__proto__ === Object.prototype) {
                            return;
                        }
                        let len = this.newList.length;
                        let height = 0;
                        for (let i = this.mark; i < len; i++) {
                            height = res[i].height;
                            if (i < 2) {
                                this.$set(this.newList[i], 'top', 0);
                                this.$set(this.newList[i], 'left', i);
                                this.boxHeight.push(height);
                                this.top.push(0);
                                this.left.push(i);
                            } else {
                                let minHeight = this.boxHeight[0];
                                let index = 0;
                                if (minHeight > this.boxHeight[1]) {
                                    minHeight = this.boxHeight[1];
                                    index = 1;
                                }
                                this.boxHeight[index] = minHeight + height + 5;
                                // console.log("top push", minHeight + 5)
                                this.top.push(minHeight + 5);
                                this.left.push(index);
                                this.$set(this.newList[i], 'top', minHeight + 5);
                                this.$set(this.newList[i], 'left', index);
                                this.loadingTop = this.boxHeight[index];
                            }
                        }
                    }).exec();
                }, 1000);
            },

            // 选中
            choose(e) {
                let index = e.currentTarget.dataset.index;
                this.$emit('click', this.newList[index]);
            }
        }
    }
</script>

<style lang="less" scoped>
    .flow-box {
        position: relative;
        color: #1a1a1a;
        padding-bottom: var(--window-bottom);
    }

    .flow-item1 {
        position: absolute;
        left: 10upx;
        width: calc(50% - 20upx);
        border: 1upx solid #f9f9f9;
        background: #F1F1F1;

        .pic {
            background: #F1F1F1;
        }

        .fallContent {
            padding: 20upx;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;

            text {
                width: 100%;
                font-size: 32upx;
                margin-bottom: 20upx;
            }
        }

        .user {
            display: flex;
            width: 220upx;
            overflow: hidden;
            font-size: 26upx;
            color: #666;
        }
    }

    .flow-item2 {
        position: absolute;
        left: 10upx;
        width: calc(50% - 20upx);
        border: 1upx solid #f9f9f9;
        background: #F1F1F1;

        .pic {
            background: #F1F1F1;
            border-radius: 20rpx;

            image {
                border-radius: 20rpx;
            }
        }

        .fallContent {
            // position: absolute;
            padding: 20upx;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;

            text {
                width: 100%;
                font-size: 36upx;
                margin-bottom: 20upx;
            }
        }

        .user {
            display: flex;
            width: 220upx;
            overflow: hidden;
            font-size: 26upx;
            color: #666;
        }
    }

    .left {
        left: 380upx;
    }

    .loading {
        position: absolute;
        width: 100%;
        text-align: center;
        padding: 20upx 0;
    }
</style>
